<template>
  <LContainer>
    <section class="grid-stack">
      <div v-for="(i, index) in components" :key="'component' + index" :gs-id="index" class="grid-stack-item"
        data-gs-no-move="yes" data-gs-no-resize="yes" :gs-x="i.x" :gs-y="i.y" :gs-h="i.h" :gs-w="i.w"
        gs-auto-position="true">
        <div class="grid-stack-item-content">
          <component :is="i.component" />
        </div>
      </div>
    </section>
  </LContainer>
</template>

<script setup lang="ts" name="DashboardAa">
import { ref, onMounted, shallowRef } from "vue";
import "gridstack/dist/gridstack.min.css";
import { GridStack } from "gridstack";
import LContainer from "@/components/layout/LContainer.vue";
import UserBar from "./components/UserBar.vue";
import UserInf from "./components/UserInf.vue";
import VisitsChart from "./components/VisitsChart.vue";
import TodoCalendar from "./components/TodoCalendar.vue";
import SysLog from "./components/SysLog.vue";
import SysNotice from "./components/SysNotice.vue";
import FriendlyLinks from "./components/FriendlyLinks.vue";

let info = ref("");
let grid: any = null;

let components: any = shallowRef([
  { x: 0, y: 0, w: 4, h: 6, i: "0", component: UserBar },
  { x: 2, y: 0, w: 4, h: 6, i: "1", component: UserInf },
  { x: 4, y: 0, w: 4, h: 12, i: "2", component: TodoCalendar },
  { x: 6, y: 0, w: 8, h: 6, i: "3", component: VisitsChart },
  { x: 8, y: 0, w: 4, h: 6, i: "4", component: SysLog },
  { x: 10, y: 0, w: 4, h: 6, i: "5", component: SysNotice },
  { x: 0, y: 5, w: 4, h: 6, i: "6", component: FriendlyLinks },
]);

onMounted(() => {
  grid = GridStack.init({
    float: true,
    cellHeight: "70px",
    minRow: 1,
  });

  grid.on("dragstop", (event: any, element: { gridstackNode: any }) => {
    console.log("move event!", event, element);
    const node = element.gridstackNode;
    info.value = `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`;
  });
});
</script>

<style lang="less" scoped>
.grid-stack {
  :deep(.grid-stack-item) {
    &>.grid-stack-item-content {
      background-color: #fff;
      inset: 5px;
      // border: 1px solid #e1e2e3;
    }

    &>.ui-resizable-ne,
    &>.ui-resizable-nw,
    &>.ui-resizable-se,
    &>.ui-resizable-sw {
      transform: none;
      background-size: contain;
      background-image: url("");
    }
  }
}
</style>
